<template>
  <el-carousel height="500px" v-if="sliders&&sliders.length">
    <el-carousel-item v-for="item in sliders" :key="item.id">
      <img v-loading="true"  :src="item.imgUrl" @click=" $router.push(item.hrefUrl) ">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'XtxCarousel',
  props: {
    sliders: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-carousel__button{
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  margin-bottom: 20px;
  background-color: rgba(0,0,0,0.2);
}
::v-deep .is-active .el-carousel__button{
  background-color: #fff;
}
</style>
